<template>
  <!-- 施工工地明细 -->
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
    <div class="stepContent">
            <div>
                <!-- <div class="basicTitle"> 基本信息</div>
                <hr class="hrStyle" /> -->
                <el-row>
                
                    <el-col :span="8">
                        <el-form-item label="工地名称" prop="name">
                            <el-input v-model="form.name" placeholder="请输入工地名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="工地类型" prop="type">
                            <el-select class="fillUp" v-model="form.type" clearable  placeholder="请选择工地类型">
                                <el-option
                                    v-for="(v,index) in typeList"
                                    :key="index"
                                    :label="v.label"
                                    :value="v.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="建设单位" prop="constructionUnit">
                            <el-input v-model="form.constructionUnit" placeholder="请输入建设单位" />
                        </el-form-item>
                    </el-col>
                    
                    <el-col :span="8">
                        <el-form-item label="有效期开始日期" prop="startDate">
                            <el-date-picker class="fillUp"  v-model="form.startDate" placeholder="请输入有效期开始日期" />
                        </el-form-item>
                    </el-col>
                    
                    <el-col :span="8">
                        <el-form-item label="有效期结束日期" prop="endDate">
                            <el-date-picker value-format="yyyy-MM-dd" class="fillUp"  v-model="form.endDate" placeholder="请输入有效期结束日期" />
                        </el-form-item>
                    </el-col>
                    
                    <el-col :span="8">
                        <el-form-item label="施工单位" prop="constructionCompany">
                            <el-input v-model="form.constructionCompany" placeholder="请输入施工单位" />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="所属省" prop="provinceCode">
                            <el-select class="fillUp" v-model="form.provinceCode" clearable  placeholder="请选择所属省" @change="formProvinceChange">
                            <el-option
                                v-for="(v,index) in provinceList"
                                :key="index"
                                :label="v.provinceName"
                                :value="v.provinceCode"
                            ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="所属市" prop="cityCode">
                        <el-select class="fillUp" v-model="form.cityCode" clearable  placeholder="请选择所属市" @change="formCityChange">
                            <el-option
                            v-for="(v,index) in cityList"
                            :key="index"
                            :label="v.cityName"
                            :value="v.cityCode"
                            ></el-option>
                        </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="所属县区" prop="areaCode">
                        <el-select class="fillUp" v-model="form.areaCode" clearable  placeholder="请选择区域" @change="formAreaChange">
                            <el-option
                            v-for="(v,index) in areaList"
                            :key="index"
                            :label="v.areaName"
                            :value="v.areaCode"
                            ></el-option>
                        </el-select>
                        </el-form-item>
                    </el-col>

                    

                    <el-col :span="8">
                        <el-form-item label="详细地址" prop="address">
                            <el-input v-model="form.address" placeholder="请输入详细地址" />
                        </el-form-item>
                    </el-col>


                    <el-col :span="8">
                        <el-form-item label="申报人名字" prop="userName">
                            <el-input v-model="form.userName" placeholder="请输入申报人名字" />
                        </el-form-item>
                    </el-col>

                    
                    <el-col :span="8">
                        <el-form-item label="是否报备" prop="isReportConstructionWaste">
                            <el-radio-group class="fillUp" v-model="form.isReportConstructionWaste">
                              <el-radio :label="1">是</el-radio>
                              <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                            <!-- <el-select class="fillUp" v-model="form.isReportConstructionWaste" clearable placeholder="请输入是否报备建筑垃圾处理方案" >
                                <el-option label="是" :value="1"></el-option>
                                <el-option label="否" :value="0"></el-option>
                            </el-select> -->
                        </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>

                    <el-col :span="8">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="form.remark" placeholder="请输入备注" />
                        </el-form-item>
                    </el-col>
                    
                </el-row>
                <!-- <hr class="hrStyle" /> -->
            </div>
        </div>
      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <!-- <el-button @click="cancel">取 消</el-button> -->
      </div>
  </div>
</template>

<script>

// import { listSite, getSite, delSite, addSite, updateSite,pageSite } from "@/api/construction/site";
import { addSite, updateSite } from "@/api/construction/site";

import {provinceList,cityList,areaList} from '@/api/region/region'


export default {
  props: {
    form: {
      type: Object,
      default: {}
    },
    provinceList: {
      default: []
    },
  },
  data() {
    return {
        active: 0,
        rules: { },
        cityList: [],
        areaList: [],
        typeList: [
            { value: '1', label: '房屋建筑工地' },
            { value: '2', label: '拆迁土地' },
            { value: '3', label: '收储工地' },
            { value: '4', label: '绿化园林工地' },
            { value: '5', label: '市政道路工地' },
            { value: '6', label: '地铁市政工地' },
            { value: '7', label: '企业建筑工地' },
            { value: '8', label: '房屋装修' },
        ],
        formData: {
            provinceCode: '', // 省
            provinceName: '', // 省
            cityCode: '', // 市
            cityName: '', // 市
            areaCode: '', // 区/县
            areaName: '', // 区/县
            name: '', // 工地名称
            type: '', // 工地类型  （说明：工地类型字典：1.房屋建筑工地 2.拆迁土地 3.收储工地 4.绿化园林工地	5.市政道路工地	6.地铁市政工地 7.企业建筑工地	8.房屋装修）
            startDate: '', // 有效期开始日期
            endDate: '', // 有效期结束日期
            constructionUnit : '', // 建设单位
            constructionCompany: '', // 施工单位
            userName: '', // 申报人名字
            address: '', // 详细地址
            logo: '', // 工地：
            remark: '', // 备注
            isReportConstructionWaste: '', // 是否报备建筑垃圾处理方案：0.否1.是
        }
    }
  },
  mounted() {
    if(this.form.cityCode){
        this.initCityList(this.form.provinceCode)
    }
    if(this.form.areaCode){
        this.initAreaList(this.form.cityCode)
    }

  },
  beforeDestroy() {
  },
  methods: {
    back() {
        this.active--
    },
    next() {
        if (this.active++ > 3) this.active = 0;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateSite(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.active=0
              this.$emit("submitForm")
              return
              this.open = false;
              this.getList();
            });
          } else {
            addSite(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.active=0
              this.$emit("submitForm")

              return
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
   initProvinceList(){
       provinceList().then(response => {
         this.provinceList = response.data;
       })
   },
   initCityList(v){
       let obj={
         provinceCode:v
       }
       cityList(obj).then(response => {
         this.cityList = response.data;
       })
   },
   initAreaList(v){
       let obj={
         cityCode:v
       }
       areaList(obj).then(response => {
         this.areaList = response.data;
       })
   },
   //省份选择的
   provinceChange(v){
       this.initCityList(v);
       this.queryParams.cityCode=null;
       this.queryParams.areaCode = null;
   },
   //省份选择的
   formProvinceChange(v){
    if(v){
      console.log(v)
     this.initCityList(v);
    }
     var obj = {};
     obj = this.provinceList.find(function(item) {
       return item.provinceCode === v;
     });
     console.log("province")
     console.log(obj)
     this.form.provinceName = '';
     if(obj && obj.provinceName){
      this.form.provinceName = obj.provinceName;
     } 
     
     this.cityList = [];
     this.areaList = [];

     this.form.cityCode = ''
     this.form.cityName = ''
     this.form.areaCode = ''
     this.form.areaName = ''

   },
   //城市选择的
   formCityChange(v){
     this.initAreaList(v);
     var obj = {};
     obj = this.cityList.find(function(item) {
       return item.cityCode === v;
     });

     this.form.cityName = '';
     if(obj && obj.cityName){
      this.form.cityName = obj.cityName;
     } 

     this.form.cityCode = v;
     this.areaList = [];

     
     this.form.areaCode = ''
     this.form.areaName = ''
   },
   formAreaChange(v){
     var obj = {};
     obj = this.areaList.find(function(item) {
       return item.areaCode === v;
     });
     console.log("area")
     console.log(obj)
     this.form.areaName = obj.areaName;
     this.form.areaCode = v;
   },
  }
}
</script>

<style lang="scss" scoped>
  .stepContent{
    min-height: 350px;
  }
  .basicTitle{
    margin: 20px 0;
    font-size: 16px;
    font-weight: bold;
  }
  .dialog-footer{
    text-align: right;
  }

  .el-step{
    .is-process{
        color: #235dc8;
        border-color: #235dc8;
    }
  }
  .fillUp{
    width: 100%;
  }

</style>